<template>
  <div class="param-manage-container">
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" class="param-tabs">
      <!-- 参数字典定义 -->
      <el-tab-pane label="参数字典定义" name="definition">
        <div class="table-box">
          <!-- 搜索表单 -->
          <el-form :model="searchForm" ref="searchFormRef" :inline="true" class="search-form">
            <el-form-item label="参数编码" prop="code">
              <el-input v-model="searchForm.code" placeholder="请输入参数编码" clearable />
            </el-form-item>
            <el-form-item label="参数名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入参数名称" clearable />
            </el-form-item>
            <el-form-item label="输入类型" prop="inputType">
              <el-select v-model="searchForm.inputType" placeholder="请选择输入类型" clearable style="width: 180px">
                <el-option label="自动采集" value="AUTO_COLLECT" />
                <el-option label="人工录入" value="MANUAL_INPUT" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="table-header">
            <el-button type="primary" :icon="CirclePlus" @click="handleAddDefinition">新增参数定义</el-button>
            <el-button type="success" :icon="Download" @click="handleExport">导出</el-button>
          </div>

          <el-table :data="definitionTableData" style="width: 100%" v-loading="definitionLoading" border>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="code" label="参数编码" width="120" />
            <el-table-column prop="name" label="参数名称" width="150" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="inputType" label="输入类型" width="120">
              <template #default="scope">
                <el-tag :type="getInputTypeTag(scope.row.inputType)">
                  {{ getInputTypeText(scope.row.inputType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="dataType" label="数据类型" width="100">
              <template #default="scope">
                <el-tag>{{ getDataTypeText(scope.row.dataType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="defaultValue" label="默认值" width="100" />
            <el-table-column prop="validRange" label="有效范围" width="120" />
            <el-table-column prop="description" label="描述" show-overflow-tooltip />
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button type="primary" link @click="handleViewDefinition(scope.row)">查看</el-button>
                <el-button type="primary" link @click="handleEditDefinition(scope.row)">编辑</el-button>
                <el-button type="danger" link @click="handleDeleteDefinition(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              :current-page="definitionPagination.currentPage"
              :page-size="definitionPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="definitionPagination.total"
              @size-change="handleDefinitionSizeChange"
              @current-change="handleDefinitionCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </div>
      </el-tab-pane>

      <!-- 工序参数配置 -->
      <el-tab-pane label="工序参数配置" name="process">
        <div class="table-box">
          <!-- 搜索表单 -->
          <el-form :model="processSearchForm" ref="processSearchFormRef" :inline="true" class="search-form">
            <el-form-item label="工序名称" prop="processName">
              <el-input v-model="processSearchForm.processName" placeholder="请输入工序名称" clearable />
            </el-form-item>
            <el-form-item label="参数名称" prop="paramName">
              <el-input v-model="processSearchForm.paramName" placeholder="请输入参数名称" clearable />
            </el-form-item>
            <el-form-item label="是否必填" prop="required">
              <el-select v-model="processSearchForm.required" placeholder="请选择" clearable style="width: 120px">
                <el-option label="必填" :value="true" />
                <el-option label="非必填" :value="false" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleProcessSearch">查询</el-button>
              <el-button @click="handleProcessReset">重置</el-button>
            </el-form-item>
          </el-form>

          <div class="table-header">
            <el-button type="primary" :icon="CirclePlus" @click="handleAddProcessParam">新增工序参数</el-button>
            <el-button type="success" :icon="Download" @click="handleProcessExport">导出</el-button>
          </div>

          <el-table :data="processTableData" style="width: 100%" v-loading="processLoading" border>
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="processName" label="工序名称" width="150" />
            <el-table-column prop="paramCode" label="参数编码" width="120" />
            <el-table-column prop="paramName" label="参数名称" width="150" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="required" label="是否必填" width="100" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.required ? 'danger' : 'info'">
                  {{ scope.row.required ? '必填' : '非必填' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="validRange" label="有效范围" width="120" />
            <el-table-column prop="defaultValue" label="默认值" width="100" />
            <el-table-column prop="tolerance" label="公差" width="100" />
            <el-table-column prop="remark" label="备注" show-overflow-tooltip />
            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button type="primary" link @click="handleViewProcessParam(scope.row)">查看</el-button>
                <el-button type="primary" link @click="handleEditProcessParam(scope.row)">编辑</el-button>
                <el-button type="danger" link @click="handleDeleteProcessParam(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              :current-page="processPagination.currentPage"
              :page-size="processPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="processPagination.total"
              @size-change="handleProcessSizeChange"
              @current-change="handleProcessCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 参数定义对话框 -->
    <el-dialog
      v-model="definitionDialogVisible"
      :title="definitionDialogTitle"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="definitionForm" :rules="definitionRules" ref="definitionFormRef" label-width="120px">
        <el-form-item label="参数编码" prop="code">
          <el-input v-model="definitionForm.code" placeholder="请输入参数编码，如：TEMP, PRESSURE" :disabled="isEditDefinition" />
        </el-form-item>
        <el-form-item label="参数名称" prop="name">
          <el-input v-model="definitionForm.name" placeholder="请输入参数名称，如：温度, 压力" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="definitionForm.unit" placeholder="请输入单位，如：℃, Pa, V" />
        </el-form-item>
        <el-form-item label="输入类型" prop="inputType">
          <el-radio-group v-model="definitionForm.inputType">
            <el-radio value="AUTO_COLLECT">自动采集</el-radio>
            <el-radio value="MANUAL_INPUT">人工录入</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据类型" prop="dataType">
          <el-select v-model="definitionForm.dataType" placeholder="请选择数据类型">
            <el-option label="数值" value="NUMBER" />
            <el-option label="文本" value="STRING" />
            <el-option label="布尔" value="BOOLEAN" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认值" prop="defaultValue">
          <el-input v-model="definitionForm.defaultValue" placeholder="请输入默认值" />
        </el-form-item>
        <el-form-item label="有效范围" prop="validRange">
          <el-input v-model="definitionForm.validRange" placeholder="请输入有效范围，如：0-100" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="definitionForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入参数描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="definitionDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitDefinition">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 工序参数配置对话框 -->
    <el-dialog
      v-model="processDialogVisible"
      :title="processDialogTitle"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="processForm" :rules="processRules" ref="processFormRef" label-width="120px">
        <el-form-item label="工序" prop="processId">
          <el-select v-model="processForm.processId" placeholder="请选择工序" style="width: 100%">
            <el-option
              v-for="process in processList"
              :key="process.id"
              :label="process.name"
              :value="process.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="参数" prop="paramDefinitionId">
          <el-select v-model="processForm.paramDefinitionId" placeholder="请选择参数" style="width: 100%" @change="handleParamChange">
            <el-option
              v-for="param in paramDefinitionList"
              :key="param.id"
              :label="`${param.name}(${param.code})`"
              :value="param.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否必填" prop="required">
          <el-radio-group v-model="processForm.required">
            <el-radio :value="true">必填</el-radio>
            <el-radio :value="false">非必填</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有效范围" prop="validRange">
          <el-input v-model="processForm.validRange" placeholder="请输入有效范围，如：20-60" />
        </el-form-item>
        <el-form-item label="默认值" prop="defaultValue">
          <el-input v-model="processForm.defaultValue" placeholder="请输入默认值" />
        </el-form-item>
        <el-form-item label="公差" prop="tolerance">
          <el-input v-model="processForm.tolerance" placeholder="请输入公差，如：±0.1" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="processForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="processDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitProcessParam">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="paramManage">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus, Download } from "@element-plus/icons-vue";

// 定义数据类型
interface ParamDefinition {
  id: number;
  code: string;
  name: string;
  unit: string;
  inputType: string;
  dataType: string;
  defaultValue: string;
  validRange: string;
  description: string;
  createTime: string;
}

interface ProcessParamRequirement {
  id: number;
  processId: number;
  processName: string;
  paramDefinitionId: number;
  paramCode: string;
  paramName: string;
  unit: string;
  required: boolean;
  validRange: string;
  defaultValue: string;
  tolerance: string;
  remark: string;
  createTime: string;
}

interface ProcessInfo {
  id: number;
  name: string;
}

// 标签页
const activeTab = ref("definition");

// 参数定义相关
const definitionLoading = ref(false);
const definitionTableData = ref<ParamDefinition[]>([]);
const searchFormRef = ref<FormInstance>();
const definitionFormRef = ref<FormInstance>();

// 工序参数相关
const processLoading = ref(false);
const processTableData = ref<ProcessParamRequirement[]>([]);
const processSearchFormRef = ref<FormInstance>();
const processFormRef = ref<FormInstance>();

// 对话框相关
const definitionDialogVisible = ref(false);
const processDialogVisible = ref(false);
const definitionDialogTitle = ref("");
const processDialogTitle = ref("");
const isEditDefinition = ref(false);
const isEditProcessParam = ref(false);

// 查询表单
const searchForm = reactive({
  code: "",
  name: "",
  inputType: ""
});

const processSearchForm = reactive({
  processName: "",
  paramName: "",
  required: undefined as boolean | undefined
});

// 分页配置
const definitionPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const processPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 表单数据
const definitionForm = reactive({
  id: 0,
  code: "",
  name: "",
  unit: "",
  inputType: "MANUAL_INPUT",
  dataType: "STRING",
  defaultValue: "",
  validRange: "",
  description: ""
});

const processForm = reactive({
  id: 0,
  processId: 0,
  paramDefinitionId: 0,
  required: false,
  validRange: "",
  defaultValue: "",
  tolerance: "",
  remark: ""
});

// 下拉选项数据
const processList = ref<ProcessInfo[]>([]);
const paramDefinitionList = ref<ParamDefinition[]>([]);

// 表单验证规则
const definitionRules = {
  code: [
    { required: true, message: "请输入参数编码", trigger: "blur" },
    { min: 2, max: 20, message: "参数编码长度在 2 到 20 个字符", trigger: "blur" }
  ],
  name: [
    { required: true, message: "请输入参数名称", trigger: "blur" },
    { min: 2, max: 50, message: "参数名称长度在 2 到 50 个字符", trigger: "blur" }
  ],
  inputType: [
    { required: true, message: "请选择输入类型", trigger: "change" }
  ],
  dataType: [
    { required: true, message: "请选择数据类型", trigger: "change" }
  ]
};

const processRules = {
  processId: [
    { required: true, message: "请选择工序", trigger: "change" }
  ],
  paramDefinitionId: [
    { required: true, message: "请选择参数", trigger: "change" }
  ]
};

// 获取输入类型标签
const getInputTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    AUTO_COLLECT: "success",
    MANUAL_INPUT: "primary"
  };
  return typeMap[type] || "info";
};

// 获取输入类型文本
const getInputTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    AUTO_COLLECT: "自动采集",
    MANUAL_INPUT: "人工录入"
  };
  return typeMap[type] || type;
};

// 获取数据类型文本
const getDataTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    NUMBER: "数值",
    STRING: "文本",
    BOOLEAN: "布尔"
  };
  return typeMap[type] || type;
};

// 获取参数定义数据
const getDefinitionTableData = async () => {
  definitionLoading.value = true;
  try {
    // 模拟数据
    const mockData: ParamDefinition[] = [
      {
        id: 1,
        code: "TEMP",
        name: "温度",
        unit: "℃",
        inputType: "AUTO_COLLECT",
        dataType: "NUMBER",
        defaultValue: "25",
        validRange: "0-100",
        description: "环境温度参数，用于监控生产环境温度",
        createTime: "2024-01-15 10:30:00"
      },
      {
        id: 2,
        code: "PRESSURE",
        name: "压力",
        unit: "Pa",
        inputType: "AUTO_COLLECT",
        dataType: "NUMBER",
        defaultValue: "101325",
        validRange: "80000-120000",
        description: "气压参数，用于监控生产环境气压",
        createTime: "2024-01-15 09:15:00"
      },
      {
        id: 3,
        code: "VOLTAGE",
        name: "电压",
        unit: "V",
        inputType: "AUTO_COLLECT",
        dataType: "NUMBER",
        defaultValue: "220",
        validRange: "200-240",
        description: "电压参数，用于监控设备供电电压",
        createTime: "2024-01-14 16:20:00"
      },
      {
        id: 4,
        code: "HUMIDITY",
        name: "湿度",
        unit: "%",
        inputType: "AUTO_COLLECT",
        dataType: "NUMBER",
        defaultValue: "50",
        validRange: "30-70",
        description: "湿度参数，用于监控生产环境湿度",
        createTime: "2024-01-14 14:45:00"
      },
      {
        id: 5,
        code: "SPEED",
        name: "转速",
        unit: "rpm",
        inputType: "MANUAL_INPUT",
        dataType: "NUMBER",
        defaultValue: "1000",
        validRange: "500-3000",
        description: "设备转速参数，需要人工录入",
        createTime: "2024-01-13 11:30:00"
      },
      {
        id: 6,
        code: "QUALITY_CHECK",
        name: "质量检查",
        unit: "",
        inputType: "MANUAL_INPUT",
        dataType: "BOOLEAN",
        defaultValue: "false",
        validRange: "",
        description: "质量检查结果，通过/不通过",
        createTime: "2024-01-12 15:20:00"
      }
    ];
    
    definitionTableData.value = mockData;
    definitionPagination.total = mockData.length;
    
    // 同时更新参数定义列表供工序参数配置使用
    paramDefinitionList.value = mockData;
  } catch (error) {
    console.error("获取参数定义数据失败:", error);
    ElMessage.error("获取参数定义数据失败");
  } finally {
    definitionLoading.value = false;
  }
};

// 获取工序参数配置数据
const getProcessTableData = async () => {
  processLoading.value = true;
  try {
    // 模拟数据
    const mockData: ProcessParamRequirement[] = [
      {
        id: 1,
        processId: 1,
        processName: "切削加工",
        paramDefinitionId: 1,
        paramCode: "TEMP",
        paramName: "温度",
        unit: "℃",
        required: true,
        validRange: "20-60",
        defaultValue: "25",
        tolerance: "±2",
        remark: "切削过程中的环境温度控制",
        createTime: "2024-01-15 10:30:00"
      },
      {
        id: 2,
        processId: 1,
        processName: "切削加工",
        paramDefinitionId: 5,
        paramCode: "SPEED",
        paramName: "转速",
        unit: "rpm",
        required: true,
        validRange: "800-2000",
        defaultValue: "1200",
        tolerance: "±50",
        remark: "主轴转速参数",
        createTime: "2024-01-15 09:15:00"
      },
      {
        id: 3,
        processId: 2,
        processName: "热处理",
        paramDefinitionId: 1,
        paramCode: "TEMP",
        paramName: "温度",
        unit: "℃",
        required: true,
        validRange: "600-800",
        defaultValue: "700",
        tolerance: "±10",
        remark: "热处理炉温度",
        createTime: "2024-01-14 16:20:00"
      },
      {
        id: 4,
        processId: 3,
        processName: "质量检验",
        paramDefinitionId: 6,
        paramCode: "QUALITY_CHECK",
        paramName: "质量检查",
        unit: "",
        required: true,
        validRange: "",
        defaultValue: "false",
        tolerance: "",
        remark: "产品质量检验结果",
        createTime: "2024-01-14 14:45:00"
      },
      {
        id: 5,
        processId: 4,
        processName: "装配",
        paramDefinitionId: 2,
        paramCode: "PRESSURE",
        paramName: "压力",
        unit: "Pa",
        required: false,
        validRange: "95000-105000",
        defaultValue: "101325",
        tolerance: "±1000",
        remark: "装配环境气压监控",
        createTime: "2024-01-13 11:30:00"
      }
    ];
    
    processTableData.value = mockData;
    processPagination.total = mockData.length;
  } catch (error) {
    console.error("获取工序参数配置数据失败:", error);
    ElMessage.error("获取工序参数配置数据失败");
  } finally {
    processLoading.value = false;
  }
};

// 获取工序列表
const getProcessList = async () => {
  try {
    // 模拟数据
    const mockData: ProcessInfo[] = [
      { id: 1, name: "切削加工" },
      { id: 2, name: "热处理" },
      { id: 3, name: "质量检验" },
      { id: 4, name: "装配" },
      { id: 5, name: "包装" },
      { id: 6, name: "入库" }
    ];
    
    processList.value = mockData;
  } catch (error) {
    console.error("获取工序列表失败:", error);
    ElMessage.error("获取工序列表失败");
  }
};

// 参数定义相关方法
const handleSearch = () => {
  definitionPagination.currentPage = 1;
  getDefinitionTableData();
};

const handleReset = () => {
  if (!searchFormRef.value) return;
  searchFormRef.value.resetFields();
  definitionPagination.currentPage = 1;
  getDefinitionTableData();
};

const handleDefinitionSizeChange = (val: number) => {
  definitionPagination.pageSize = val;
  getDefinitionTableData();
};

const handleDefinitionCurrentChange = (val: number) => {
  definitionPagination.currentPage = val;
  getDefinitionTableData();
};

const handleAddDefinition = () => {
  definitionDialogTitle.value = "新增参数定义";
  isEditDefinition.value = false;
  Object.assign(definitionForm, {
    id: 0,
    code: "",
    name: "",
    unit: "",
    inputType: "MANUAL_INPUT",
    dataType: "STRING",
    defaultValue: "",
    validRange: "",
    description: ""
  });
  definitionDialogVisible.value = true;
};

const handleViewDefinition = (row: ParamDefinition) => {
  ElMessage.info(`查看参数定义: ${row.name}`);
};

const handleEditDefinition = (row: ParamDefinition) => {
  definitionDialogTitle.value = "编辑参数定义";
  isEditDefinition.value = true;
  Object.assign(definitionForm, { ...row });
  definitionDialogVisible.value = true;
};

const handleDeleteDefinition = async (row: ParamDefinition) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除参数定义 "${row.name}" 吗？`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );
    
    ElMessage.success("删除成功");
    getDefinitionTableData();
  } catch {
    ElMessage.info("已取消删除");
  }
};

const handleSubmitDefinition = async () => {
  if (!definitionFormRef.value) return;
  
  try {
    await definitionFormRef.value.validate();
    
    // 这里应该调用API保存数据
    ElMessage.success(isEditDefinition.value ? "编辑成功" : "新增成功");
    definitionDialogVisible.value = false;
    getDefinitionTableData();
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

// 工序参数相关方法
const handleProcessSearch = () => {
  processPagination.currentPage = 1;
  getProcessTableData();
};

const handleProcessReset = () => {
  if (!processSearchFormRef.value) return;
  processSearchFormRef.value.resetFields();
  processPagination.currentPage = 1;
  getProcessTableData();
};

const handleProcessSizeChange = (val: number) => {
  processPagination.pageSize = val;
  getProcessTableData();
};

const handleProcessCurrentChange = (val: number) => {
  processPagination.currentPage = val;
  getProcessTableData();
};

const handleAddProcessParam = () => {
  processDialogTitle.value = "新增工序参数";
  isEditProcessParam.value = false;
  Object.assign(processForm, {
    id: 0,
    processId: 0,
    paramDefinitionId: 0,
    required: false,
    validRange: "",
    defaultValue: "",
    tolerance: "",
    remark: ""
  });
  processDialogVisible.value = true;
};

const handleViewProcessParam = (row: ProcessParamRequirement) => {
  ElMessage.info(`查看工序参数: ${row.processName} - ${row.paramName}`);
};

const handleEditProcessParam = (row: ProcessParamRequirement) => {
  processDialogTitle.value = "编辑工序参数";
  isEditProcessParam.value = true;
  Object.assign(processForm, {
    id: row.id,
    processId: row.processId,
    paramDefinitionId: row.paramDefinitionId,
    required: row.required,
    validRange: row.validRange,
    defaultValue: row.defaultValue,
    tolerance: row.tolerance,
    remark: row.remark
  });
  processDialogVisible.value = true;
};

const handleDeleteProcessParam = async (row: ProcessParamRequirement) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除工序参数 "${row.processName} - ${row.paramName}" 吗？`,
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );
    
    ElMessage.success("删除成功");
    getProcessTableData();
  } catch {
    ElMessage.info("已取消删除");
  }
};

const handleSubmitProcessParam = async () => {
  if (!processFormRef.value) return;
  
  try {
    await processFormRef.value.validate();
    
    // 这里应该调用API保存数据
    ElMessage.success(isEditProcessParam.value ? "编辑成功" : "新增成功");
    processDialogVisible.value = false;
    getProcessTableData();
  } catch (error) {
    console.error("表单验证失败:", error);
  }
};

// 参数选择变化时自动填充默认值
const handleParamChange = (paramId: number) => {
  const selectedParam = paramDefinitionList.value.find(p => p.id === paramId);
  if (selectedParam) {
    processForm.defaultValue = selectedParam.defaultValue;
    processForm.validRange = selectedParam.validRange;
  }
};

// 导出功能
const handleExport = () => {
  ElMessage.info("导出参数定义功能开发中");
};

const handleProcessExport = () => {
  ElMessage.info("导出工序参数配置功能开发中");
};

// 页面加载时获取数据
onMounted(() => {
  getDefinitionTableData();
  getProcessTableData();
  getProcessList();
});
</script>

<style scoped>
.param-manage-container {
  padding: 20px;
}

.param-tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-box {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 标签页样式优化 */
:deep(.el-tabs__header) {
  margin: 0;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
}

:deep(.el-tabs__item) {
  font-weight: 500;
  color: #6c757d;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #495057;
  font-weight: 600;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #495057;
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
}

/* 按钮样式优化 */
:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-dialog__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  border-radius: 12px 12px 0 0;
}

:deep(.el-dialog__title) {
  font-weight: 600;
  color: #495057;
}

/* 标签样式优化 */
:deep(.el-tag) {
  border-radius: 4px;
  font-weight: 500;
}

/* 分页样式优化 */
:deep(.el-pagination) {
  font-weight: 500;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 4px;
  margin: 0 2px;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 4px;
}
</style>